<!--  -->
<template>
  <section class="app-container">
    <div class="backBox">
      <!-- <router-link class="them-color-hover" :to="{ name: 'person-manage' }"> -->
      <router-link class="them-color-hover" :to="{ name: 'personList' }">
        <i class="el-icon-back"></i>&nbsp;&nbsp;&nbsp;返回
      </router-link>
    </div>
    <Details :personDetails="personDetails "/>
    <div class="tabsBox">
      <el-tabs
        v-model="activeName"
        class="demo-tabs"
        type="card"
        style="height: 100%"
      >
        <el-tab-pane
          class="demo"
          :label="item.name"
          :name="item.name"
          v-for="(item, index) in activeList"
          :key="item.id"
          style="height: 100%"
        >
          <component
            :is="item.component"
            :personId="$route.query.id"
            :personName="$route.query.name"
            :personGender="Number($route.query.gender)"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
  </section>
</template>

<script>
import Details from "./sub/Details.vue";
import DeviceRule from "./sub/DeviceRule";
import Face from "./sub/Face";
import PalmarVein from "./sub/PalmarVein";
import AccessRecords from "./sub/AccessRecords";
import ICCard from "./sub/ICCard";
import Finger from "./sub/Finger";
import {getDeviceInfoDetailsApi} from "@/api/network";

export default {
  data() {
    return {
      personDetails: {},
      activeList: [
        // { id: 1, component: DeviceRule, name: "设备权限" },
        {
          id: 2,
          component: Face,
          name: "人脸",
        },
        // {
        //   id: 3,
        //   component: PalmarVein,
        //   name: "掌静脉",
        // },
        {
          id: 4,
          component: ICCard,
          name: "通行卡",
        },
        // {
        //   id: 5,
        //   component: AccessRecords,
        //   name: "通行记录",
        // },
        {
          id: 6,
          component: Finger,
          name: "指纹",
        },
      ],
      activeName:'人脸'
    };
  },
  components: {
    Details,DeviceRule,Face,PalmarVein,AccessRecords,ICCard
  },
  methods: {
    getPersonInfo(){
      // console.log('rrrr',this.$route.query)
      let query = {
        personId: this.$route.query.id,
        cardType: "",
        type: "icCard",
        cardNum: "",
        pageSize: 10,
        pageNum: 1,
      }

    },
    init() {
      getDeviceInfoDetailsApi().then(res => {
        // console.log('get',res.deviceType.deviceType.value)
        if (res.deviceType.deviceType.value == "PalmVein") {
          console.log("PalmVein")
          // this.isPalmVein = true
          this.activeList.splice(0,1)
          this.activeName = '掌静脉'
          console.log(this.activeList)

        }
      })
    },
  },
  created() {
    this.getPersonInfo();
    this.init()
  },
};
</script>

<style lang="scss" scoped>
.tabsBox {
  margin-top: 20px;
}

</style>
